<template>
  <div class="app-container">
    <form-filter ref="formFilter" @on-filter="submitFilterForm"/>
    <el-table border :data="domainList" v-loading="loading" element-loading-text="加载中...">
      <el-table-column label="代理账号" width="150" prop="username" fixed="">
      </el-table-column>
      <!--<el-table-column label="姓名" prop="name">-->
      <!--</el-table-column>-->
      <!--<el-table-column label="代理返佣模式" prop="commission">-->
         <!-- <template slot-scope="{row}">
            {{getCommison(row.commission)}}
        </template> -->
      <!--</el-table-column>-->
      <el-table-column label="通用域名" prop="domainCount">
        <template slot-scope="{row}">
            {{row.domainCount}}条
        </template>
      </el-table-column>
      <el-table-column label="专属域名-1" prop="domain1">
      </el-table-column>
      <el-table-column label="专属域名-2" prop="domain2">
      </el-table-column>
      <el-table-column label="专属域名-3" prop="domain3">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="{row}">
          <el-button v-if="roleCheck('check')" size="mini" type="warning" @click="openDialog({props: row, dialogName: staticDialogName2})">查看域名数据</el-button>
          <el-button v-if="roleCheck('update')" size="mini" type="warning" @click="openDialog({props: row, dialogName: staticDialogName})">修改域名</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <custom-dialog :visible="dialogVisible" v-if="dialogVisible && dialogName === 'custom-dialog'"
                   returnButtonName="返回" :callback="closeDialog">
      <div slot="title">&nbsp;</div>
      <domain-list :user-id="dialogProps.userId" :user-name="dialogProps.username"/>
    </custom-dialog>
    <agency-domain-dialog
      :id="dialogProps.id"
      :row-data="dialogProps"
      v-if="dialogName === staticDialogName"
      v-model="dialogVisible"
      @submit="submitFinished"/>
  </div>
</template>


<script>
  import {getAgencyDomainList, editAgencyDomain} from '@/services/api/agency';
  import FormFilter from "./formFilter";
  import AgencyDomainDialog from "./domainDialog";
  import DomainList from "./domainList";
  import {grid, dialog} from '@/build'
  import RechargePaymentMerchant from '@/views/finance/paymentConfigOverview/rechargePaymentMerchant'

  export default {
    name: "agency-domain",
    components: {AgencyDomainDialog, FormFilter ,DomainList},
    mixins: [grid, dialog],
    data() {
      return {
        tableData: {},
        auditStep: 0,
        rowData: {},
        auditDialogVisible: false,
        filters: {
          page:1,
          size: 20,
        },
        viewTitle: '',
        staticDialogName: 'agency-domain-dialog',
        staticDialogName2: 'custom-dialog',
        filterDateType: false,
      }
    },
    computed:{
      domainList(){
        const {list} = this.tableData
        if(list&&list.length>0){
          return list
        }
        return[]
      },
      // modelList(){
      //   let self=this;
      //   this.$nextTick(()=>{
      //     return self.$refs.formFilter.modelList
      //   })
      // }
    },
    methods: {
      getCommison(id){
        let self=this;
        this.$nextTick(()=>{
          console.log(self.$refs.formFilter.modelList)
          return _.find(self.$refs.formFilter.modelList,{id:id}).name
        })
      },
      submitFilterForm(formInline) {
        const _formInline = Object.assign(this.filters, formInline)
        this.filters = _formInline;
        this.gridSearch()
      },
      // 显示查看账号详情
      handleViewDetail(row) {
        this.openDialog({props: row, dialogName: this.staticDialogName2})
        window.scrollTo(0, 0)
        this.viewTitle = '代理名称：' + row.name
        this.$store.commit(types.SET_MEMBER_ID, row.id)
      },
      resetCustomDialog() {
        this.$store.commit(types.SET_MEMBER_ID, 0)
        this.closeDialog()
      },
      delDomain(row) {
        this.$confirm('确定要删除独立域名吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          editAgencyDomain(row).then(([result, data]) => {
            if (result) {
              this.$notify({
                type:'success',
                message:'删除成功'
              })
            }
          })
        }).catch(() => {
          this.$notify({
            type:'warning',
            message:'取消删除'
          })
        });
      }
    },
    mounted() {
      this.bindGet(getAgencyDomainList, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data=>{
          return data || {}
        }
      });
      this.getAll()

    }
  }
</script>

<style scoped>

</style>
